var XHR = function(method, ad, params) {
	var xhr = new XMLHttpRequest();
	xhr.onload = params.onload || null;
	xhr.open(method, ad);
	if(method == 'POST') {xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');}
	var variables   = params.variables || null
	  , str			= '';
	for(var i in variables) {
		 str += i + '=' + encodeURIComponent( variables[i] ) + '&';
		}
	xhr.send( str );
}
//Tableau pour stocker les propositions de jeu
var propositionJeu = [];

function init() {
	//Créer la partie
	var jeu = '/' + document.getElementById('idGame').value;
	XHR('GET', jeu, {onload:initTableau});
	
	var ms, player;
	 
	// Connect to the SocketIO server to retrieve ongoing games.
	socket = io.connect();
	socket.on('participants', function(data) {
		 var ul = document.getElementById('lesParticipants');
		 ul.innerHTML='';
		 for(p in data.participants) {
				var li = document.createElement('li'); 
				ul.appendChild( li );
				li.appendChild( document.createTextNode( data.participants[p] ) );
			}
		});
	socket.on('FinalCountDown'	, function(data) {
			ms   = data.FinalCountDown/1000;
			console.log("FinalCountDown : " + ms);
		});
	socket.on('TerminateGame'	, function(data) {
			h1 = document.querySelector('body > header > h1');
			h1.innerHTML += ' est terminée ! Vainqueur: '+player;
		});
	socket.on('solutions'		, function(data) {
			console.log("Solutions are :\n"+JSON.stringify(data.solutions));
			
			player = data.solutions[0].player;
			
			if(document.getElementById('login').value != player){
				document.getElementById('countdown').innerHTML ="Il vous reste "+ms+" secondes pour trouver une solution!";
			}
		});
	socket.emit ('identification', 	{ login	: document.getElementById('login').value
									, idGame: document.getElementById('idGame').value}
				);
}
//Permet de prendre un robot avec la souris
function drag(e){
	console.log(e);
	e.dataTransfer.setData("Robot",e.target.id);
	var couleur = e.target.getAttribute('data-couleur');
	propositionJeu.push({command: 'select' ,robot: couleur})
	var param = {onload: function() {
		        		obj = JSON.parse(this.responseText);
		        		var next = obj.nextPositions;
						var tab = document.getElementById('tableau');
		        		for (var i = 0; i < next.length; i++){
							var pos = tab.rows[next[i].l].cells[next[i].c];
							pos.classList.add('select');
							pos.ondragover = function(e){e.preventDefault();};
							pos.ondrop = drop;
		        		}
            		}
            		,variables: 
					{login: document.getElementById('login').value
					,idGame: document.getElementById('idGame').value
					,proposition: JSON.stringify(propositionJeu)
					}
				};
	XHR('POST', '/proposition', param);
}

//Permet de poser un robot avec la souris
function drop(e){
	var data = e.dataTransfer.getData("Robot");
	couleur = document.getElementById(data).getAttribute('data-couleur');
	
	propositionJeu.push({command: 'move' ,line: e.target.parentNode.rowIndex ,column: e.target.cellIndex});
	params = {onload: function() {
		        	obj = JSON.parse(this.responseText);
		        	e.preventDefault();						
					e.target.appendChild(document.getElementById(data));						
				    supprOldPossibilites();
		    	}, variables: 
		    		{login: document.getElementById('login').value
		        	,idGame: document.getElementById('idGame').value
		        	,proposition: JSON.stringify(propositionJeu)
		    		}
        	};
    XHR('POST', '/proposition', params);
}

//Affiche la grille du serveur
function afficherGrilleDeJeu(c ,tab ,jeu){
	//affichage de la grille
	for(var i=0 ; i<c.board.length ; i++) {
		var ligne = tab.insertRow(-1);
		for(var j=0 ; j<c.board[i].length ; j++) {
			var cases = ligne.insertCell(-1);
			for(var mur in c.board[i][j]) {
				cases.classList.add(mur);				
			}
		}
	}
	jeu.appendChild(tab);
}

//Complète le milieu du tableau avec le carré réglementaire
function remplirCarreMilieuDuPlateau(c ,tab){
	tab.rows[c.board.length/ 2].cells[c.board.length / 2].style.backgroundColor = 'grey';
    tab.rows[(c.board.length/ 2) - 1].cells[c.board.length / 2].style.backgroundColor = 'grey';
    tab.rows[(c.board.length/ 2) - 1].cells[(c.board.length / 2) - 1].style.backgroundColor = 'grey';
    tab.rows[c.board.length/ 2].cells[(c.board.length / 2) - 1].style.backgroundColor = 'grey';
}

//Positionne les robots dynamiquement
function placerRobotsJeu(robot ,tab){
	for(var i=0 ; i<robot.length ; i++)
	{
	
	
		var div = document.createElement('div');
		
		div.style.backgroundImage = "url('https://cdn0.iconfinder.com/data/icons/black-logistics-icons/60/Robot_head.png')";
		div.style.backgroundSize = '15px 15px';

		var l = robot[i].line;
		var c = robot[i].column;
		var couleur = robot[i].color;
		var coord = tab.rows[l].cells[c];
		
		div.classList.add('robot');
		div.classList.add(couleur);
		div.dataset.couleur = couleur;
		div.id = "robot" + i;
		div.draggable = true;
		coord.appendChild(div);
		div.ondragstart = drag; 
	}
}

//Positionne la cible dynamiquement
function placerCibleAAtteindre(cible ,tab){	
	var l = cible.l;
	var c = cible.c;
	var cases = tab.rows[l].cells[c];
	cases.classList.add('target');
	cases.style.backgroundColor = cible.t;
	
	cases.style.backgroundImage = "url('http://www.icone-png.com/png/25/24882.png')";
	cases.style.backgroundSize = '22px 22px';	
}

//Récupère dynamiquement la grille du serveur
function initTableau(){
	var c = JSON.parse(this.responseText);
	var tab = document.createElement('table');
	tab.id = 'tableau';
	var jeu = document.getElementById('partie');
	afficherGrilleDeJeu(c, tab, jeu);
	placerCibleAAtteindre(c.target ,tab);
	placerRobotsJeu(c.robots ,tab);
	remplirCarreMilieuDuPlateau(c ,tab);
}

//Supprime l'affichage des anciennes possibilités de jeu
function supprOldPossibilites() {
	cellules = document.querySelectorAll('.select');    
    for (var i = 0; i < cellules.length; i++) {
        cellules[i].classList.remove('select');
        cellules[i].ondrop = "";
    }
}